﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Indirect Function</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 100px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });
        initSpread(spread);
    });
    function initSpread(spread) {
        var sheet = spread.sheets[0], sheet2 = spread.sheets[1];

        sheet.setArray(0, 0, [["b1", 1], ["A", 2], ["B", 3]]);
        sheet2.setArray(0, 0, [["b3", 1], ["A", 3], ["B", 5]]);

        sheet.setValue(3, 0, "Random");
        sheet.setFormula(3, 1, "=RANDBETWEEN(1,100)");
        sheet.setValue(4, 0, "Now");
        sheet.setFormula(4, 1, "=NOW()");

        sheet.setArray(8, 0, [["Formula", "Description", "Result"]]);
        sheet.setColumnWidth(0, 165);
        sheet.setColumnWidth(1, 285);
        var sampleData = [
            ['=INDIRECT("A1")', 'Value of A1 => "b1"'],
            ['=INDIRECT(A1)', 'Value of the reference of A1 => value of b1 => 1'],
            ['=INDIRECT("A"&(1+2))', 'Value of A3 => "B"'],
            ['=INDIRECT(A3&B2)', 'Value of B2 => 2'],
            ['=INDIRECT("Sheet2!"&A1)', 'Value of Sheet2\'s B1'],
            ['=INDIRECT("Sheet2!A1")', 'Value of Sheet2\'s A1']
        ];

        for (var i = 0, len = sampleData.length; i < len; i++) {
            var data = sampleData[i], row = 6 + i;
            sheet.setArray(row, 0, [data]);
            sheet.setFormula(row, 2, data[0]);
        }

        $("#btnAddCustomName").click(function () {
            var name = $("#customName").val(),
                ref = $("#customReference").val(),
                row = 15;

            if (name) {
                sheet.addCustomName(name, ref, 0, 0);
                sheet.setArray(row, 0, [['=INDIRECT(name1)', 'name1 is a custom name, if a valid cell reference is defined by it then use the value otherwise #REF!']]);
                sheet.setFormula(row, 2, '=INDIRECT(' + name + ')');
            }
        });
    }
    /*code_end*/
    </script>
</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:410px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label>Custom name:</label>
                <input type="text" value="name1" id="customName" />
            </div>
            <div class="option-row">
                <label>Reference to:</label>
                <input type="text" value="$A$1" id="customReference" />
            </div>
            <div class="option-row">
                <input type="button" id="btnAddCustomName" value="Add custom name" title="Add a custom name for sample" />
            </div>
        </div>
    </div>
</body>
</html>